<template>
  <el-dialog title="事件详情" :visible.sync="visible" @closed="onClose">
    <template v-if="visible">
      <info-data :render-info-item="renderInfoItem" :info-data="formData" />
      <el-row>
        <InfoItem label="照片">
          <el-image
            v-for="item in formData.eventImgList"
            :key="item.id"
            class="imgItem"
            :src="item.fileUrl"
            :alt="item.attachType"
            :preview-src-list="eventImgList"
          />
        </InfoItem>
        <InfoItem label="已处理照片">
          <el-image
            v-for="item in formData.handleEventImgList"
            :key="item.id"
            class="imgItem"
            :src="item.fileUrl"
            :alt="item.attachType"
            :preview-src-list="handleEventImgList"
          />
        </InfoItem>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import InfoData from '@/components/InfoData'
import InfoItem from '@/components/InfoData/InfoItem'
import { parseTime } from '@/utils/index'
import { reporterType, eventStatus } from '@/config/dict'
import { fetchEventGet } from '@/api/sanitation/even'
export default {
  components: {
    InfoData, InfoItem
  },
  data: function() {
    return {
      formData: {},
      // 照片
      eventImgList: [],
      // 已处理照片
      handleEventImgList: [],
      componentList: [{ value: 1, label: '扶手' }],
      renderInfoItem: [
        { label: '质量类型', key: 'qualityType', col: 12 },
        { label: '当前状态', key: 'status', col: 12 },
        { label: '上报来源', key: 'reporterType', col: 12 },
        { label: '上报时间', key: 'reportTime', col: 12 },
        { label: '上报人', key: 'reporterName', col: 12 },
        { label: '上报地址', key: 'address', col: 24 },
        { label: '派发方式', key: 'distributeType', col: 12 },
        { label: '巡查人员', key: 'patrolAccountName', col: 12 },
        { label: '片区', key: 'areaName', col: 12 },
        { label: '片区负责人', key: 'areaResponsibleAccountName', col: 12 },
        { label: '部件', key: 'componentName', col: 12 },
        { label: '部件负责人', key: 'componentResponsibleAccountName', col: 12 },
        { label: '处理人员', key: 'handlerAccountName', col: 12 },
        { label: '处理时间', key: 'handleTime', col: 12 },
        { label: '处理时长', key: 'handleDurationTime', col: 12 },
        { label: '处理时限', key: 'timeLimit', col: 12 },
        { label: '是否超时', key: 'isTimeout', col: 12 },
        { label: '扣分', key: 'score', col: 12 },
        { label: '转单时间', key: 'transferTime', col: 12 },
        { label: '转单人员', key: 'transferAccountName', col: 12 },
        { label: '处理描述', key: 'handleDesc', col: 24 },
        { label: '驳回描述', key: 'rejectDesc', col: 24 },
        { label: '事件描述', key: 'eventDesc', col: 24 },
        { label: '质量内容', key: 'qualityContent', col: 24 }
      ],
      visible: false
    }
  },
  methods: {
    open(id) {
      if (id) {
        this.$data.id = id
        this.postGet(id).then(() => {
          this.$data.visible = true
        })
      }
    },
    onClose() {
      this.$data.formData = {}
    },
    // 获取详情
    postGet(id) {
      return fetchEventGet({ id }).then(res => {
        // 当前状态处理
        const status = eventStatus.find(e => e.key === res.status)
        // 上报来源处理
        const type = reporterType.find(e => e.key === res.reporterType)

        res.reportTime = parseTime(res.reportTime)
        res.handleTime = parseTime(res.handleTime)
        res.transferTime = parseTime(res.transferTime)
        res.status = status.value
        res.reporterType = type.value
        // 如果处理时长>处理时限 就是超时
        res.isTimeout = res.handleDurationTime > res.timeLimit ? '是' : '否'
        // 处理时长
        res.handleDurationTime = res.handleDurationTime ? res.handleDurationTime + '分钟' : ''
        // 处理时限
        res.timeLimit = res.timeLimit ? res.timeLimit + '分钟' : ''
        this.$data.formData = res
        this.$data.eventImgList = res.eventImgList.map(e => e.fileUrl)
        this.$data.handleEventImgList = res.handleEventImgList.map(e => e.fileUrl)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .imgItem{
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
</style>
